<script lang="tsx">
/**
 * 搜索组件
 */
export default {
  name: "search-form"
}
</script>

<script lang="tsx" setup>
import {ref, watch} from "vue"
import SearchFormManager from "./search-form-manager.ts"
import Render from "../../core/render/index.vue"
import {cloneDeep} from "lodash";

/**
 * 定义props
 */
const propsData = defineProps<{
  searchFormModel: SearchFormManager<any>;
  reflections?: any;
}>()

/**
 * 定义emit
 */
const emit = defineEmits<{
  (e: 'searchFormReset'): void
  (e: 'searchFormFilter'): void
}>()

/**
 * 搜索表单组件
 */
const searchFormModel = ref<SearchFormManager<any>>()

/**
 * 搜索表单数据
 */
const searchFormData: any = ref({})

/**
 * 重置
 */
const handleReset = () => {
  searchFormData.value = {}
  emit('searchFormReset')
}

/**
 * 筛选
 */
const handleSearch = () => {
  emit('searchFormFilter')
}

/**
 * 获取筛选值
 */
const getSearchFormData = async () => {
  if (searchFormModel.value?.beforeSubmit) {
    const result = cloneDeep(searchFormData.value)
    return await searchFormModel.value.beforeSubmit(result)
  }
  return searchFormData.value
}

/**
 * 设置筛选值
 */
const setSearchFormData = async (data: any) => {
  if (searchFormModel.value?.bindData) {
    searchFormData.value = await searchFormModel.value.bindData(data)
  } else {
    searchFormData.value = data
  }
}

/**
 * 直接获取筛选值
 */
const getSearchFormDataDirect = () => {
  return searchFormData.value
}

/**
 * 直接设置筛选值
 */
const setSearchFormDataDirect = (data: any) => {
  searchFormData.value = data
}

/**
 * 设置组件值
 */
const handleSetData = (item?: any) => {
  if (item) {
    searchFormData.value[item.key] = item.value
  }
}

/**
 * 初始化数据
 */
const initData = () => {
  if (searchFormModel.value?.initData) {
    setSearchFormData(searchFormModel.value.initData)
  }
}

/**
 * 初始化样式
 */
const initStyle = (newValue: any) => {
  searchFormModel.value = {
    ...newValue,
    els: newValue.els.map((item: any) => {
      return {
        ...item,
        style: {
          width: "160px",
          ...item.style
        }
      }
    })
  }
}

/**
 * 是否显示
 */
const isShow = (item: any, value: any) => {
  const func = item.show as Function
  if (!func) {
    return true
  }
  return func(value)
}

/**
 * 监视
 */
watch(() => propsData.searchFormModel, function (newValue: any) {
  if (newValue) {
    initStyle(newValue)
    initData()
  }
}, {
  deep: true,
  immediate: true
})

/**
 * 暴露
 */
defineExpose({
  getSearchFormData,
  setSearchFormData,
  getSearchFormDataDirect,
  setSearchFormDataDirect
})
</script>

<template>
  <div class="search-form">
    <div class="form-box">
      <el-scrollbar>
        <div class="form-list">
          <div v-for="(item,index) of searchFormModel?.els" v-show="isShow(item,searchFormData)" :key="index"
               class="form-item">
            <Render :data="searchFormData" :item="item" :reflections="propsData.reflections" v-bind="$attrs"
                    @setData="handleSetData"/>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <el-button class="form-button" @click="handleReset">
      <template #default>
        <div class="button-logout">
          <img alt="" class="button-img" src="../../../../public/img/frame/layout/search-reset.svg"/>
          <div class="button-content">
            重置
          </div>
        </div>
      </template>
    </el-button>
    <el-button class="form-button" type="primary" @click="handleSearch">
      <template #default>
        <div class="button-logout">
          <img alt="" class="button-img" src="../../../../public/img/frame/layout/search-filter.svg"/>
          <div class="button-content">
            筛选
          </div>
        </div>
      </template>
    </el-button>
  </div>
</template>

<style lang="scss" scoped>
.search-form {
  flex: 0;
  display: flex;

  .form-box {
    max-width: 1400px;

    .form-list {
      display: flex;

      .form-item {
        padding: 5px;
      }
    }
  }

  .form-button {
    flex: 0;
    padding: 0 20px;
    margin: 5px;

    .button-logout {
      display: flex;

      .button-img {
        width: 15px;
        height: 15px;
      }

      .button-content{
        height: 15px;
        line-height: 15px;
        margin-left: 5px;
      }
    }
  }
}
</style>